<template>
    <div>
        <van-nav-bar title="每日推荐" left-text="返回" left-arrow @click-left="onClickLeft" />
        
        <van-image width="10rem" height="5rem" fit="cover"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        <!-- 播放按钮 -->
        <div class="smallTitle">
            <button class="allBtn" @click="getAll">
                <van-icon name="play-circle" color="#EC4141" size="20" />&nbsp;&nbsp;播放全部
            </button>
            <van-icon name="wap-nav" size="20" />
        </div>
        <div class="songSteet">
            <van-list>
                <van-cell v-for="item, index in recommendList" :key="index" @click="onSongId(item.id)">
                    <span class="listNum">{{ index + 1 }}</span>
                    {{ item.name }} - {{ ar[index].join('/') }} - {{item.al.name}}
                    <van-icon class="more" name="ellipsis" @click="show = true" />
                    <van-action-sheet v-model:show="show" @select="onSelect">
                        <div class="songCart">
                            <van-image width="40" height="40" :src="item.al.picUrl" />&nbsp;&nbsp;
                            <span>歌曲：{{ item.name }} - {{ item.ar.name }}</span>
                        </div>
                        <van-list>
                            <van-cell><van-icon name="close" />&nbsp;&nbsp;&nbsp;不感兴趣</van-cell>
                            <van-cell><van-icon name="music-o"/>&nbsp;&nbsp;&nbsp;下一首播放</van-cell>
                            <van-cell><van-icon name="certificate" />&nbsp;&nbsp;&nbsp;收藏到歌单</van-cell>
                            <van-cell><van-icon name="down" />&nbsp;&nbsp;&nbsp;下载</van-cell>
                            <van-cell><van-icon name="chat-o" />&nbsp;&nbsp;&nbsp;评论</van-cell>
                            <van-cell><van-icon name="share-o" />&nbsp;&nbsp;&nbsp;分享</van-cell>
                            <van-cell><van-icon name="contact" />&nbsp;&nbsp;&nbsp;歌手：{{ item.ar.name }}</van-cell>
                            <van-cell><van-icon name="idcard" />&nbsp;&nbsp;&nbsp;专辑：{{ item.al.name }}</van-cell>
                            <van-cell><van-icon name="warning-o" />&nbsp;&nbsp;&nbsp;屏蔽歌手或歌曲</van-cell>
                        </van-list>
                    </van-action-sheet>
                </van-cell>
            </van-list>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { Toast } from 'vant';
import router from '@/router';
import { RequestrRecommendList } from '@/api/homeFind';
const color = reactive({
    red: '#EC4141',
})
const show = ref(false);

const onClickLeft = () => history.back();
const getAll = () => console.log('all')
const onSelect = (item:any) => {
    // 默认情况下点击选项时不会自动收起
    // 可以通过 close-on-click-action 属性开启自动收起
    show.value = false;
    Toast(item.name);
};
// const toIndex = (index:number) => console.log(index)

// 每日推荐(!!!需要登录)
let ar = ref([])
let recommendList = ref([])
const getRecommend = async () => {
    let recommendData = await RequestrRecommendList()
    let { code, data } = recommendData.data
    if(code == 200){
        recommendList.value = data.dailySongs
        console.log(recommendList)
        ar.value = steetSongs.value.map(item => {
            return  item.ar.map(item => {
                    return item.name
                })
            })
    }
}
getRecommend()

// 传参id
const onSongId = (id: number) => {
    // songId.value = id
    router.push({
        name: "musicdetail", query: { id: id }
    })
}
</script>
<style scoped lang="scss">
.smallTitle {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;

    .allBtn {
        outline: none;
        border: none;
        background: white;
        font-size: 14px;
        display: flex;
        align-items: center;
    }

}

.songSteet {
    .listNum {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    .more {
        float: right;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    .songCart{
        height: 50px;
        padding: 5px 16px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #F1F3F4;
    }
}
</style>